<template>
  <div class="count">
    <h2>当前累计结果为:{{  sum  }},十倍后的结果为：{{ bigSum }}：{{ bigSum }}：{{ bigSum }}：{{ bigSum }}</h2>
    <h2>就读于：{{  school  }},地址位于：{{ address }}</h2>
    <select v-model.number="n">
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useCountStore } from '@/store/count';
import { storeToRefs } from 'pinia';
const countStore=useCountStore()
// `pinia`提供的`storeToRefs`只会将数据做转换，而`Vue`的`toRefs`会转换`store`中数据。
let {sum,address,school,bigSum}=storeToRefs(countStore)
console.log(storeToRefs(countStore))
console.log(bigSum.value)

let n=ref(1)
function add(){
    // pinia进行数据修改的方式一：拿到数据后直接进行使用
    // countStore.sum+=n.value
    // countStore.school="青软实训"
    // countStore.address="青岛"
    // pinia进行数据修改的方式二：适用于批量修改数据的操作
    // countStore.$patch({
    //     sum:countStore.sum+=n.value,
    //     school:"青软实训总部基地",
    //     address:"山东省青岛市"
        
    // })
    // pinia进行数据修改的方式三：借助pinia中的action进行定义
    countStore.increment(n.value)
}
function sub(){
    
    if(countStore.sum>0){
        countStore.sum-=n.value
    }
}

</script>

<style scoped>
.count{
    background-color: lightblue;
    border-radius: 6px;
    box-shadow: 6px 6px 12px gray;
    padding: 10px;

}
.count *{
    margin: 10px;
}

</style>